import React, { useState } from 'react';
import { Form, Input, Modal, Radio, TreeSelect, DatePicker } from 'antd';


const { TextArea } = Input;

const FormItem = Form.Item;

export interface CreateFormProps {
  treeData?: API.TreeNodeItem[];
  modalVisible: boolean;
  onSubmit: (values:API.DepartmentItem) => void;
  onCancel: () => void;
}

const formLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 15 },
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [formVals] = useState<API.PatrolJob>({
    jobName: '',
    memo: '',
    deptId: undefined,
    deptName: '',
    useState: 1
  });

  const [form] = Form.useForm();
  const [deptName, setDeptName] = useState('');
  const { modalVisible, onSubmit: handleAdd, onCancel, treeData } = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    if (fieldsValue.startTime) {
      fieldsValue.startTime = fieldsValue.startTime.format('YYYY-MM-DD hh:mm:ss');
    }
    if (fieldsValue.endTime) {
      fieldsValue.endTime = fieldsValue.endTime.format('YYYY-MM-DD hh:mm:ss');
    }
    fieldsValue.deptName = deptName;
    form.resetFields();
    handleAdd(fieldsValue);
  };

  const onChange = (value:string, label:any[]) => {
    setDeptName(label[0]);
  };

  return (
    <Modal
      width={640}
      destroyOnClose
      title="新增任务"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          jobName: formVals.jobName,
          memo: formVals.memo,
          deptId: formVals.deptId,
          useState: formVals.useState
        }}
      >
        <FormItem
          label="任务名称"
          name="jobName"
          rules={[{ required: true, message: '请输入至少二个字符！', min: 2 }]}
        >
          <Input placeholder="请输入" autoComplete='off' />
        </FormItem>
        <FormItem
          label="任务描述"
          name="memo"
          rules={[{ required: true, message: '请输入至少十个字符！', min: 10 }]}
        >
          <TextArea  placeholder="请输入" showCount maxLength={100}  />
        </FormItem>
        <FormItem
          label="责任部门"
          name="deptId"
          rules={[{ required: true, message: '请选择上级！' }]}
        >
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={treeData}
            onChange={onChange}
            placeholder="请选择上级部门"
            key="key"
            treeDefaultExpandAll
          />
        </FormItem>
        <FormItem
          label="开始时间"
          name="startTime"
        >
          <DatePicker placeholder='请选择' style={{ width: '100%' }} showTime={true} />
        </FormItem>
        <FormItem
          label="结束时间"
          name="endTime"
        >
          <DatePicker placeholder='请选择' style={{ width: '100%' }} showTime={true} />
        </FormItem>
        <FormItem
          label="启用状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
      </Form>
    </Modal>
  );
};

export default CreateForm;
